<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
                title="地址列表"
                left-text="返回"
                left-arrow
                @click-left="$router.go(-1)"
            />
        </header>
        <div class="content">
            <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="addAddress"
                @edit="onEdit"
                @select="onSelect"
            >
            </van-address-list>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import router from '../../router'
import { update, defaultAddress, deleteAddress, updateOrderAddress, addressList } from '../../api/order'
import { Button, Toast, AddressList } from 'vant'

Vue.use(Button)
Vue.use(AddressList)
export default {
  data () {
    return {
      chosenAddressId: '1',
      listFlag: true,
      list: [
        // {
        //   id: '1',
        //   name: '张三',
        //   tel: '13000000000',
        //   address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        //   isDefault: true
        // },
        // {
        //   id: '2',
        //   name: '李四',
        //   tel: '1310000000',
        //   address: '浙江省杭州市拱墅区莫干山路 50 号'
        // }
      ]
    }
  },
  methods: {
    // 新增地址
    addAddress () {
      // console.log(this.$route.params.time);
      router.push({ name: 'order3', params: { time: this.$route.params.time }})
    },

    // 编辑，点击地址进入编辑
    onEdit (item, index) {
      // console.log(item);
      this.$router.push({ name: 'order4', params: {item}})
    },

    //  切换选中的地址，然后跳回提交订单页面
    onSelect (selectAddressMessage) {
      // console.log(selectAddressMessage);  切换选中地址的资料 
      selectAddressMessage.time = this.$route.params.time

      //  修改订单地址
      updateOrderAddress (selectAddressMessage).then(res => {
        //将选中地址的 addressid 传到订单页，更新地址
        router.push({ name: 'order', params: { addressid: selectAddressMessage.addressid }}) 
      })
    },
    addressList(){
      //  查询地址列表
      addressList({ userid: localStorage.getItem('userid') }).then(res => {
        // 是集合所有地址列表的对象数组
        // console.log(res.data.data);
        res.data.data.forEach((item,index) => {
          item.id = index + 1
          var str = item.addressDetail.split('areaCode:')
          item.address = item.province + ' ' + item.city + ' ' + item.county + ' ' + str[0]
          if(item.isDefault === true){  // 找到默认地址往前添加
            this.list.unshift(item)
          } else {   // 没有默认地址正常添加
            this.list.push(item)
          }
          //  打开地址列表，默认选中在用的地址
          // console.log(this.$route.params.id);
          if(item.addressid === this.$route.params.id){
              this.chosenAddressId = item.id
          }

        })
      })
    }
  },
  async mounted () {

    this.addressList()
 
  }
}

</script>

<style>
.van-address-list{
  overflow:auto
}
</style>